<template>
  <div class="w-[98%] p-20px">
    <div class="filter-section">
      <el-input v-model="filter.id" placeholder="员工编号" @input="fetchData" clearable style="width: 200px;"></el-input>
      <el-input v-model="filter.name" placeholder="员工姓名" @input="fetchData" clearable style="width: 200px;"></el-input>
      <el-button type="primary" @click="fetchData()">查询</el-button>
    </div>
    <el-button class="m-b-20px" type="primary" @click="openDrawer('add')">新增</el-button>

    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
        :width="column.width"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button @click="openDrawer('edit', scope.row)" size="mini">编辑</el-button>
          <el-button type="danger" @click="deleteItem(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems" @current-change="fetchData"
      background layout="total,prev, pager, next" class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>

    <el-drawer title="详细信息" v-model="drawerVisible" size="60%" :before-close="closeDrawer">
      <el-form :inline="true" :model="currentItem" label-width="80px" class="form-inline">
        <el-form-item label="员工编号">
          <el-input v-model="currentItem.id" required></el-input>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="currentItem.name" required></el-input>
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <el-button @click="closeDrawer">取消</el-button>
        <el-button type="primary" @click="saveItem">保存</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 过滤条件
      filter: {
        name: '',
        id: '',
      },
      // 表格数据
      tableData: [],
      // 列定义
      columns: [
        { prop: 'id', label: '员工编号',width:'180px' },
        { prop: 'name', label: '员工姓名', },
      ],
      // 总项目数
      totalItems: 0,
      // 当前页码
      currentPage: 1,
      // 每页显示条目数
      pageSize: 15,
      // 抽屉是否可见
      drawerVisible: false,
      // 当前编辑或添加的项目
      currentItem: {},
      // 操作类型：添加或编辑
      actionType: '',
    };
  },
  methods: {
    // 获取数据
    fetchData() {
      // 模拟获取数据
      this.tableData = [
        { id: 1, name: '刘宝意', },
        { id: 2, name: '行三', },
        { id: 3, name: '哈哈哈', },
        { id: 4, name: '李国强', },
        // 重复项可去除
      ];
      // 更新总项目数
      this.totalItems = this.tableData.length;
    },
    // 打开抽屉
    openDrawer(action, item = {}) {
      this.actionType = action; // 设置当前操作类型
      this.currentItem = { ...item }; // 复制当前项
      this.drawerVisible = true; // 显示抽屉
    },
    // 关闭抽屉
    closeDrawer() {
      this.drawerVisible = false; // 隐藏抽屉
    },
    // 重置表单
    resetForm() {
      this.currentItem = {}; // 清空当前项
      this.actionType = ''; // 清空操作类型
    },
    // 保存项目
    saveItem() {
      if (this.actionType === 'add') {
        // 添加新项目
        this.currentItem.id = this.totalItems + 1; // 生成新ID
        this.tableData.push(this.currentItem); // 添加到表格数据
      } else if (this.actionType === 'edit') {
        // 编辑现有项目
        const index = this.tableData.findIndex(item => item.id === this.currentItem.id);
        this.tableData.splice(index, 1, this.currentItem); // 替换旧项目
      }
      // 更新总项目数
      this.totalItems = this.tableData.length;
      this.closeDrawer(); // 关闭抽屉
    },
    // 删除项目
    deleteItem(id) {
      this.tableData = this.tableData.filter(item => item.id !== id); // 过滤掉被删除的项目
      this.totalItems = this.tableData.length; // 更新总项目数
    },
  },
  mounted() {
    this.fetchData(); // 组件挂载后获取数据
  },
};
</script>

<style scoped>
/* 过滤区域样式 */
.filter-section {
  display: flex;
  /* 使用Flexbox布局 */
  align-items: center;
  /* 垂直居中 */
  margin-bottom: 20px;
  /* 底部间距 */
}

/* 过滤项之间的间距 */
.filter-section>* {
  margin-right: 10px;
  /* 右侧间距 */
}

/* 分页组件样式 */
.pagination {
  margin-top: 20px;
  /* 上边距 */
  float: right;
  /* 右对齐 */
}

/* 抽屉底部按钮样式 */
.drawer-footer {
  text-align: right;
  /* 右对齐 */
  margin-top: 20px;
  /* 上边距 */
}

/* 表单样式 */
.form-inline {
  display: flex;
  /* 使用Flexbox布局 */
  flex-wrap: wrap;
  /* 允许换行 */
}

/* 表单项之间的间距 */
.form-inline .el-form-item {
  margin-right: 20px;
  /* 右侧间距 */
}
</style>
